<template>
  <div class="app-container">
    <!-- 步骤提示 -->
    <div class="step-titles">
      <div v-if="active==0">当前: 基本信息</div>
      <div v-if="active==1">当前: 车况信息</div>
      <div v-if="active==2">当前: 照片参数</div>
      <div v-if="active==3">当前: 说明及归属</div>
    </div>

    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success" class="steps-container">
      <el-step title="基本信息"></el-step>
      <el-step title="车况信息"></el-step>
      <el-step title="照片参数"></el-step>
      <el-step title="说明及归属"></el-step>
    </el-steps>

    <!-- 基本信息 -->
    <el-form v-show="active == 0" ref="baseForm" :model="form" :rules="rules" label-width="120px" class="step-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="车辆名称:" prop="carName">
            <el-input v-model="form.carName" placeholder="请输入车辆名称"/>
          </el-form-item>
          <el-form-item label="封面图片:" prop="image">
            <ImageUpload v-model="form.image"/>
<!--            <el-upload-->
<!--              class="avatar-uploader"-->
<!--              :headers="uploadHeaders"-->
<!--              :action="uploadUrl"-->
<!--              :before-upload="beforeUpload"-->
<!--              :on-success="successUpload"-->
<!--              :on-error="handleUploadError"-->
<!--            >-->
<!--              <img v-if="form.image" :src="form.image" class="avatar"/>-->
<!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
          </el-form-item>
          <el-form-item label="起拍价格(元):" prop="startPrice">
            <el-input-number v-model="form.startPrice" :min="0" :precision="2"/>
          </el-form-item>
          <el-form-item label="最低加价(元):" prop="addPrice">
            <el-input-number v-model="form.addPrice" :min="0" :precision="2"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车源地:" prop="address">
            <el-input v-model="form.address" placeholder="请输入车辆所在地"/>
          </el-form-item>
          <el-form-item label="起拍时间:" prop="startTime">
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择起拍时间"
            />
          </el-form-item>

          <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
            />
          </el-form-item>
          <el-form-item label="当前状态:">
            {{ form.status || '未开始' }}
          </el-form-item>
          <el-form-item v-if=" form.status =='待提车' || form.status=='完成成交' || form.status=='待成交'" label="修改状态:">
            <el-button round @click="handleDeal" v-if="form.status!='拍卖中' && form.status!='拍卖结束' ">完成成交</el-button>
            <el-button round @click="waitDeal"
                       v-if="form.status!='待成交' && form.status!='拍卖中' && form.status!='拍卖结束' && form.status=='待提车'">待成交
            </el-button>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>

    <!-- 车况信息 -->
    <el-form v-show="active == 1" class="step-form">
      <el-form-item label="车辆名称:">
        {{ form.carName }}
      </el-form-item>
      <el-form-item label="车况描述:" prop="content">
        <editor v-model="form.content" :min-height="300"/>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="车身颜色:" prop="color">
            <el-input v-model="form.color"/>
          </el-form-item>
          <el-form-item label="排放标准:" prop="paifangStand">
            <el-input v-model="form.paifangStand"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="变速箱:" prop="gearbox">
            <el-input v-model="form.gearbox"/>
          </el-form-item>
          <el-form-item label="动力类型:" prop="powerType">
            <el-input v-model="form.powerType"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 照片参数 -->
    <el-form v-show="active == 2" class="step-form step-photo-params">
      <el-form-item label="车辆名称:">
        {{ form.carName }}
      </el-form-item>

      <el-form-item label="车辆照片:" prop="images">
        <el-alert title="请注意：仅支持上传 PDF、DOCX、JPEG 和 JPG 文件，且文件大小不能超过 2MB。" type="info" show-icon
                  style="margin-bottom: 10px;"/>
        <ImageUpload v-model="form.images"/>
<!--        <el-upload-->
<!--          :action="uploadUrl"-->
<!--          :headers="uploadHeaders"-->
<!--          :on-success="handleVehicleImageSuccess"-->
<!--          :file-list="fileList"-->
<!--          list-type="picture-card"-->
<!--          :before-upload="beforeUpload"-->
<!--          :limit="5"-->
<!--          :on-exceed="handleExceed"-->
<!--          :on-remove="handleRemove"-->
<!--          :show-file-list="true"-->
<!--        >-->
<!--          <i class="el-icon-plus"></i>-->
<!--        </el-upload>-->

      </el-form-item>

      <!-- 动态参数 -->
      <el-form-item label="参数:" prop="parameter">
        <div v-for="(item, index) in dynamicItems" :key="'param-'+index" class="dynamic-item">
          <el-row :gutter="0" class="param-row">
            <el-col :span="10" class="param-col">
              <el-input
                v-model="item.key"
                placeholder="参数名称"
                clearable
              />
            </el-col>
            <el-col :span="10" class="param-col">
              <el-input
                v-model="item.value"
                placeholder="参数值"
                clearable
              />
            </el-col>
            <el-col :span="4" class="btn-col">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                class="del-btn"
                @click="removeParam(index)"
              />
            </el-col>
          </el-row>
        </div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addParam"
          style="margin-top: 10px"
        >添加参数
        </el-button>
      </el-form-item>

      <!-- 评估检测 -->
      <el-form-item label="评估监测:" prop="assessment">
        <el-alert
          title="请注意：仅支持上传 PDF、DOCX、JPEG 和 JPG 文件。"
          type="info"
          show-icon
          style="margin-bottom: 10px;"
        />
        <div v-for="(item, index) in assessmentItems" :key="'assess-'+index" class="dynamic-item">
          <el-row :gutter="0" class="param-row">
            <el-col :span="10" class="param-col">
              <el-input
                v-model="item.assess"
                placeholder="监测方"
                clearable
              />
            </el-col>
            <el-col :span="10" class="param-col">
<!--              <FileUpload v-model=""-->
              <el-upload
                class="upload-assessment"
                :action="uploadUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="(res) => handleAssessmentSuccess(res, index)"
                :before-upload="(file) => beforeAssessmentUpload(index, file)"
                :on-progress="(event, file) => handleUploadProgress(event, index)"
              >
                <el-button type="primary" :loading="item.uploading">
                  {{ item.fileUrl ? '重新上传' : '上传评估文件' }}
                </el-button>
              </el-upload>
              <el-button
                v-if="item.fileUrl"
                type="primary"
                @click="viewUploadedFile(item.fileUrl)"
                style="margin-left: 10px;"
              >
                查看已上传文件
              </el-button>
            </el-col>
            <el-col :span="4" class="btn-col">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                class="del-btn"
                @click="removeAssessment(index)"
              />
            </el-col>
          </el-row>
          <el-progress
            v-if="item.uploadProgress !== undefined"
            :percentage="item.uploadProgress"
            status="success"
            style="margin-top: 10px;"
          />
        </div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addAssessment"
          style="margin-top: 10px;"
        >新增监测
        </el-button>
      </el-form-item>

    </el-form>

    <!-- 归属信息 -->
    <el-form v-show="active==3" label-width="80px" class="step-form">
      <el-form-item label="成交说明:">
        <editor
          ref="editor"
          v-model="form.explainContent"
          :min-height="192"
          @upload-image="handleImageUpload"
        />
      </el-form-item>
      <el-row :gutter="20" v-if="form.status == '完成成交' || form.status == '待成交' ">
        <el-col :span="12">
          <el-form-item label="归属人:">
            <el-input v-model="form.belongPerson" placeholder="请输入归属人"/>
          </el-form-item>
          <el-form-item label="性别:">
            <el-input v-model="form.sex" placeholder="请输入归属人性别"/>
          </el-form-item>
          <el-form-item label="所在地:">
            <el-input v-model="form.belongAddress" placeholder="请输入归属人所在地"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄:">
            <el-input v-model="form.birthday" placeholder="请输入归属人生日"/>
          </el-form-item>
          <el-form-item label="联系方式:">
            <el-input v-model="form.phone" placeholder="请输入归属人联系方式"/>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="form.email" placeholder="请输入归属人邮箱"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 操作按钮 -->
    <div class="footer-btns">
      <el-button @click="goBack">返回列表</el-button>
      <el-button @click="preStep" v-show="active > 0">上一步</el-button>
      <el-button type="primary" @click="nextStep" v-show="active < 3">下一步</el-button>
      <el-button type="primary" @click="submitForm" v-show="active === 3">提交</el-button>
    </div>
  </div>
</template>

<script>
import {addCar, getCar, updateCar} from '@/api/scp/car'
import Editor from '@/components/Editor'
import {getToken} from '@/utils/auth' // 引入获取token的方法
import axios from 'axios' // 引入 axios

export default {
  components: {Editor},
  data() {
    return {
      carId: undefined,
      isEdit: false,
      active: 0,
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 后端文件上传接口
      uploadHeaders: {
        Authorization: 'Bearer ' + getToken()
      },
      fileList: [],
      dynamicItems: [],
      form: {
        belongAddress: '',
        carName: '',
        image: '',
        address: '',
        startPrice: 0,
        addPrice: 0,
        startTime: null,
        endTime: null,
        status: '',
        content: '',
        paifangStand: '',
        color: '',
        gearbox: '',
        powerType: '',
        parameterJson: '',
        images: "",
        belongPerson: '',
        sex: '',
        phone: '',
        birthday: '',
        email: '',
        explainContent: '',
        assessmentData: '[]'
      },
      rules: {
        carName: [{required: true, message: '车辆名称不能为空', trigger: 'blur'}],
        image: [{required: true, message: '请上传封面图片', trigger: 'change'}],
        startPrice: [{required: true, message: '请输入起拍价格', trigger: 'blur'}],
        address: [{required: true, message: '请输入车源地', trigger: 'blur'}],
        startTime: [{required: true, message: '请选择起拍时间', trigger: 'change'}],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'change'},
          {
            validator: (rule, value, callback) => {
              if (new Date(value) < new Date(this.form.startTime)) {
                callback(new Error('结束时间不能早于开始时间'));
              } else {
                callback();
              }
            }, trigger: 'change'
          }
        ]
      },
      assessmentItems: [],
    }
  },
  methods: {
    handleImageUpload(file) {
      // 进行上传逻辑，与您之前的 uploadToMinIO 方法类似
      this.uploadToMinIO(file).then((imageUrl) => {
        // 将上传成功的图片 URL 插入到富文本编辑器中
        this.$refs.yourEditorRef.insertEmbed(yourImagePosition, 'image', imageUrl);
      }).catch(error => {
        console.error("图片上传失败:", error);
        this.$message.error("图片上传失败");
      });
    },
    insertImageToEditor(imageUrl) {
      // 引用编辑器组件
      const editor = this.$refs.editor; // 根据 ref 名称访问编辑器

      // 插入图片到富文本编辑器
      const range = editor.getSelection(); // 获取当前选中的位置
      if (range) {
        editor.insertEmbed(range.index, 'image', imageUrl); // 在当前光标位置插入图片
        editor.setSelection(range.index + 1); // 将光标移动到图片后面
      } else {
        // 如果没有选中位置，直接在编辑器末尾插入
        editor.insertEmbed(editor.getLength(), 'image', imageUrl);
      }
    },
    async uploadToMinIO(file) {
      const formData = new FormData();
      formData.append('file', file);
      try {
        const response = await axios.post(this.uploadUrl, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: 'Bearer ' + getToken()
          }
        });

        console.log("MinIO 上传响应:", response); // 打印响应以检查其结构

        if (response.data.code === 200) {
          const filename = response.data.msg; // 假设后端返回的是文件名
          const minioBaseUrl = "http://127.0.0.1:9000"; // MinIO 服务器地址
          const bucketName = "gh-scp"; // 替换为您的桶名
          const fileUrl = `${minioBaseUrl}/${bucketName}/${filename}`; // 拼接 URL

          return fileUrl; // 返回完整的文件 URL
        } else {
          throw new Error(response.data.msg || '上传失败');
        }

      } catch (error) {
        this.$message.error('文件上传失败');
        console.error(error);
        throw error;
      }
    }
    ,
    handleVehicleImageSuccess(response, file) {
      // 检查后端返回的响应
      if (response && response.code === 200 && response.msg) {
        const filename = response.msg; // 从 msg 中获取文件名
        const minioBaseUrl = "http://127.0.0.1:9000"; // MinIO 服务器地址
        const bucketName = "gh-scp"; // 替换为您的桶名
        const vehicleImageUrl = `${minioBaseUrl}/${bucketName}/${filename}`; // 拼接完整的 URL

        // 将新图片添加到 fileList
        this.fileList.push({
          name: file.name,
          url: vehicleImageUrl
        });

        // 更新 images 字段
        this.updateImages(); // 确保更新 form.images
        console.log('车辆图片上传成功:', vehicleImageUrl);
      } else {
        console.error('无法获取车辆图片的 URL:', response); // 记录无法获取 URL 的情况
      }
    }
    ,
    async successUpload(response, file) {
      try {
        const minioPath = await this.uploadToMinIO(file.raw);
        this.form.image = minioPath; // 将 MinIO 路径赋值给表单中的 image 属性
        console.log("MinIO 上传成功:", minioPath);
      } catch (error) {
        console.error("上传过程出现错误:", error);
      }
    }
    ,
    handleUploadError(err) {
      console.error("上传错误:", err);
      this.$message.error('文件上传出错');
    },
    handleExceed(files) {
      this.$message.warning('最多只能上传 5 张图片！');
    },
    beforeUpload(file) {
      const validTypes = ['image/jpeg', 'image/png'];
      const isValidType = validTypes.includes(file.type);

      if (!isValidType) {
        this.$message.error('上传文件格式不正确，请上传 JPG 或 PNG 格式的图片。');
      }
      return isValidType;
    },
    viewUploadedFile(fileUrl) {
      window.open(fileUrl, '_blank');
    },
    waitDeal() {
      this.$confirm('此操作将状态改为待成交, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.status = "待成交";
        console.log('当前状态:', this.form.status);
      }).catch(() => {
        this.$message({type: 'info', message: '已取消修改'});
      });
    },
    handleDeal() {
      this.$confirm('此操作将把状态改为完成成交, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.status = "完成成交";
        console.log('当前状态:', this.form.status);
      }).catch(() => {
        this.$message({message: '用户已取消'});
      });
    },
    addAssessment() {
      this.assessmentItems.push({
        assess: '',
        fileUrl: '',
        uploading: false,
        uploadProgress: 0 // 初始化为0
      });
      console.log('已添加新的评估监测项', this.assessmentItems);
    },
    removeAssessment(index) {
      this.assessmentItems.splice(index, 1);
      console.log('删除后的评估监测项', this.assessmentItems);
    },
    beforeAssessmentUpload(index, file) {
      const validTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg'];
      const isValid = validTypes.includes(file.type);
      if (!isValid) {
        this.$message.error('请上传 PDF、DOCX 或 JPG 文件');
      }
      this.$set(this.assessmentItems[index], 'uploading', true);
      return isValid;
    },
    handleAssessmentSuccess(response, index) {
      console.log('文件上传响应:', response); // 打印响应以检查
      if (response && response.code === 200 && response.msg) {
        const filename = response.url; // 从 url 中获取文件名
        const fileUrl = filename; // 拼接完整的 URL

        console.log(filename)
        console.log(666)
        // 将新文件的 URL 添加到 assessmentItems 数组
        this.$set(this.assessmentItems[index], 'fileUrl', fileUrl);
        this.$set(this.assessmentItems[index], 'uploading', false);
        console.log(`评估文件 ${index} 上传成功:`, fileUrl);
      } else {
        this.$message.error('文件上传响应格式异常');
        this.$set(this.assessmentItems[index], 'uploading', false);
      }
    }
    ,
    addParam() {
      this.dynamicItems.push({key: '', value: ''});
    },
    removeParam(index) {
      this.dynamicItems.splice(index, 1);
    },
    goBack() {
      this.$router.go(-1);
    },
    preStep() {
      if (this.active > 0) this.active--;
    },
    async nextStep() {
      if (this.active === 0) {
        try {
          await this.$refs.baseForm.validate();
          this.active++;
        } catch (error) {
          this.$message.error('请填写完整基本信息');
        }
      } else {
        this.active++;
      }
    },
    handleUploadSuccess(response) {
      if (response && response.url) {
        this.fileList.push({
          name: response.fileName || '图片文件',
          url: response.url
        });
        this.updateImages(); // 更新 images 字段
      }
    }
    ,
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
        this.updateImages(); // 确保在移除文件后更新 images 字段
      }
    },

    updateImages() {
      // 确保 fileList 包含所有上传的图片
      this.form.images = this.fileList.map(file => file.url).join(','); // 拼接 URL
      console.log('更新后的 images:', this.form.images); // 调试输出
    }
    ,
    async submitForm() {
      console.log('提交前的 form:', this.form);
      console.log('当前 images:', this.form.images); // 调试输出

      try {
        const parameterObj = {};
        this.dynamicItems.forEach(item => {
          if (item.key && item.value) {
            parameterObj[item.key] = item.value;
          }
        });
        this.form.parameterJson = JSON.stringify(parameterObj);

        const validAssessments = this.assessmentItems.filter(item => {
          return item.assess && item.fileUrl;
        }).map(item => ({
          assess: item.assess,
          fileUrl: item.fileUrl
        }));

        this.form.assessmentData = validAssessments;

        const submitData = {
          ...this.form,
          carId: this.carId || undefined,
          status: this.form.status || '未开始',
          startPrice: Number(this.form.startPrice || 0),
          addPrice: Number(this.form.addPrice || 0)
        };

        // 确保 images 字段包含拼接后的 URL
        submitData.images = this.form.images;

        const res = this.carId
          ? await updateCar(submitData)
          : await addCar(submitData);

        if (res.code === 200) {
          this.$message.success(this.carId ? '更新成功' : '新增成功');
          this.goBack();
        } else {
          throw new Error(res.msg || '操作失败');
        }
      } catch (error) {
        console.error('提交失败:', error);
        this.$message.error(error.message || '提交失败');
      }
    },
    handleUploadProgress(event, index) {
      const percent = event.percent; // 获取上传进度
      console.log(`文件 ${index} 上传进度: ${percent}%`);
      // 这里可以通过 Vue 的响应式更新显示进度
      this.$set(this.assessmentItems[index], 'uploadProgress', percent);
    },
    async loadCarData() {
      try {
        const res = await getCar(this.carId);
        if (res.code === 200 && res.data) {
          const data = res.data;
          Object.keys(this.form).forEach(key => {
            if (key in data) {
              this.form[key] = data[key];
            }
          });
          console.log(data.userId)
          if (data.userId){
            this.form.userId = data.userId
            console.log("用户id:" + this.form.userId)
          }
          if (data.image) {
            this.form.image = data.image; // 确保将请求的数据中的 image 赋值给表单
          }

          if (data.images) {
            const imageUrls = data.images.split(',').filter(url => url.trim());
            this.fileList = imageUrls.map(url => ({name: url.split('/').pop(), url}));
          }

          if (data.parameterJson) {
            try {
              const paramObj = JSON.parse(data.parameterJson);
              this.dynamicItems = Object.entries(paramObj).map(([key, value]) => ({key, value}));
            } catch (e) {
              console.error('参数解析错误:', e);
              this.dynamicItems = [];
            }
          }

          if (data.assessmentData) {
            console.log('获取到的评估数据:', data.assessmentData);
            try {
              if (Array.isArray(data.assessmentData)) {
                this.assessmentItems = data.assessmentData.map(item => ({
                  assess: item.assess || '',
                  fileUrl: item.fileUrl || '',
                  uploading: false
                }));
              } else if (typeof data.assessmentData === 'string' && data.assessmentData.trim()) {
                this.assessmentItems = JSON.parse(data.assessmentData).map(item => ({
                  assess: item.assess || '',
                  fileUrl: item.fileUrl || '',
                  uploading: false
                }));
              } else {
                this.assessmentItems = [];
              }
              console.log('处理后的评估监测项:', this.assessmentItems);
            } catch (e) {
              console.error('评估数据解析错误:', e);
              this.assessmentItems = [];
            }
          } else {
            this.assessmentItems = [];
          }

          console.log('加载完成的表单数据:', this.form);
          console.log('加载完成的评估监测项:', this.assessmentItems);
        } else {
          this.$message.error(res.msg || '加载数据失败');
        }
      } catch (error) {
        console.error('加载数据异常:', error);
        this.$message.error('加载数据异常');
      }
    }
  },
  created() {
    this.carId = this.$route.query.carId || this.$route.params.carId;
    this.isEdit = !!this.carId;

    if (this.isEdit) {
      this.loadCarData();
    } else {
      this.form.status = '未开始';
    }
  },
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.steps-container {
  margin: 20px auto;
  width: 80%;
}

.step-form {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.step-titles {
  margin: 20px 10%;
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
}

.footer-btns {
  margin-top: 30px;
  text-align: center;
}

.step-photo-params .dynamic-item {
  margin-bottom: 12px;
}

.step-photo-params .param-row {
  display: flex !important;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
}

.step-photo-params .param-col {
  flex: 1;
  min-width: 0;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center;
}

.step-photo-params .btn-col {
  flex-shrink: 0;
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.step-photo-params .del-btn {
  padding: 8px !important;
  margin-left: 8px;
  transform: scale(0.95) translateY(-1px);
  vertical-align: middle;
}

.step-photo-params .param-col .el-upload {
  display: inline-flex !important;
  align-items: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 响应式优化（仅影响步骤3） */
@media (max-width: 768px) {
  .step-photo-params .param-col {
    padding: 0 6px !important;
  }

  .step-photo-params .del-btn {
    margin-left: 6px;
    transform: scale(0.9);
  }
}
</style>
